<template>
  <div style="border: 1px solid #ccc">
    <Toolbar style="border-bottom: 1px solid #ccc"
             :editor="editorRef"
             :defaultConfig="toolbarConfig"
             :mode="mode" />
    <Editor class="EditorClass"
            v-model="valueHtml"
            disabled
            :defaultConfig="editorConfig"
            :mode="mode"
            @onCreated="handleCreated" />
  </div>
</template>
<script>
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { onBeforeUnmount, ref, shallowRef, onMounted, watch, defineProps, defineEmits } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import COS from "cos-js-sdk-v5"; // 通过 npm 安装的 SDK
const cos = new COS({
  SecretId: "AKIDY2oZHrHV7LYmsqhS8gGnDZfB7v9A51Qk",
  SecretKey: "KYhsz33xnR2CE6nYEmAZagdT6c3LVVYa",
});

export default {
  components: { Editor, Toolbar },
  emit: (['changeEditor']),
  setup (props, ctx) {
    onMounted(() => {
      // 隐藏上传视频功能
      watch(valueHtml, (val) => {
        ctx.emit('changeEditor', val)
      })
    })
    // 编辑器实例，必须用 shallowRef
    const editorRef = shallowRef()
    // 设置不显示上传视频按钮
    // editor.config.uploadVideoShowBtn = false;
    // 内容 HTML
    const valueHtml = ref('')
    const toolbarConfig = {}
    toolbarConfig.excludeKeys = [
      'group-video',
      'insertTable'
    ]
    const editorConfig = { placeholder: '请输入内容...', MENU_CONF: {} }
    // 组件销毁时，也及时销毁编辑器
    onBeforeUnmount(() => {
      const editor = editorRef.value
      if (editor == null) return
      editor.destroy()
    })
    // 自定义图片上传
    editorConfig.MENU_CONF['uploadImage'] = {
      async customUpload (file, insertFn) {
        try {
          // 这里结合实际场景写自己上传图片的逻辑，此处代码仅为示例
          await upload(file, insertFn);
        } catch (error) {
          console.log(error);
        }
      }
    }

    // 自定义视频上传
    // editorConfig.MENU_CONF['uploadVideo'] = {
    //   async customUpload (file, insertFn) {
    //     let formData = new FormData();
    //     formData.append('files', file);
    //     try {
    //       // 这里结合实际场景写自己上传图片的逻辑，此处代码仅为示例
    //       const { data } = await upload(formData);
    //       // 对图片进行处理，同样需要结合实际场景
    //       data.forEach(item => {
    //         insertFn(item, 'video')
    //       })
    //     } catch (error) {
    //       console.log(error);
    //     }
    //   }
    // }

    // 上传
    const upload = (file, insertFn) => {
      const defBase = import.meta.env
      cos.uploadFile(
        {
          Bucket: defBase.VITE_bucket /* 填写自己的 bucket，必须字段 */,
          Region: "ap-chengdu" /* 存储桶所在地域，必须字段 */,
          Key: 'PT/' + Date.now().toString() /* 存储在桶里的对象键（例如:1.jpg，a/b/test.txt，图片.jpg）支持中文，必须字段 */,
          Body: file, // 上传文件对象
          SliceSize:
            1024 *
            1024 *
            5 /* 触发分块上传的阈值，超过5MB使用分块上传，小于5MB使用简单上传。可自行设置，非必须 */,
          onProgress: function (progressData) {
            // console.log(JSON.stringify(progressData));上传文件数据
          },
        },
        (err, data) => {
          if (err) {
            console.log("上传失败", err);
          } else {
            insertFn("https://" + data.Location, 'image', "https://" + data.Location)
            return
          }
        }
      );
    }
    const handleCreated = (editor) => {
      editorRef.value = editor // 记录 editor 实例，重要！
    }

    return {
      editorRef,
      valueHtml,
      mode: 'default', // 或 'simple'
      toolbarConfig,
      editorConfig,
      handleCreated,
      upload
    };
  }
}
</script>  
<style scoped>
.EditorClass {
  height: 420px !important;
  overflow: hidden;
}
</style>
